<template>
	<view class="bg-co-g columnbox address-content wdh-100 jus">
		<view class="info-box columnbox wdh-100" style="padding: 20rpx;">
			<textarea v-model="addressName" auto-height class="wdh-100 text-box"
				placeholder="请粘贴或输入文本,点击识别自动识别姓名、电话和地址"></textarea>
			<view class="rowbox wdh-100" style="justify-content: flex-end;">
				<view style="margin-top: 40rpx;">
					<u-button size='mini' color="#00b6b2" @click="copyAddress">粘贴并识别</u-button>
				</view>
			</view>
		</view>
		<view class="info-box columnbox wdh-100">
			<view class="rowbox one-info spb">
				<view class="info-title">联系人</view>
				<view class="right-box rowbox jus">
					<input placeholder-class="plac-class" v-model="name" placeholder="请填写联系人姓名" />
				</view>
			</view>
			<view class="rowbox one-info spb">
				<view class="info-title">手机号</view>
				<view class="right-box rowbox jus">
					<input v-model="phone" type="number" maxlength="11" placeholder-class="plac-class"
						placeholder="请填写联系人手机号码" />
				</view>
			</view>
			<view class="rowbox one-info spb">
				<view class="info-title">省市区</view>
				<view class="rowbox right-box spb">
					<picker mode="region" class="wdh-100" @change="chooseRegion">
						<view class="plac-class wdh-100" v-if="region.length==0">请选择</view>
						<view class="area-info wdh-100" v-else>{{region.join(',')}}</view>
					</picker>
				</view>
			</view>
			<view class="rowbox one-info spb">
				<view class="info-title">详细地址</view>
				<view class="right-box rowbox jus">
					<input placeholder-class="plac-class" v-model="menpai" placeholder="例:16号楼5层501室" />
				</view>
			</view>
		</view>
		<view v-if="loadflag" class="one-btn rowbox diabled-btn">保存地址</view>
		<view v-else class="def-bgcol one-btn rowbox" @click="submitInfo">保存地址</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loadflag: false,
				name: '',
				menpai: '',
				phone: '',
				area: '',
				areainfo: null,
				lat: 0,
				lng: 0,
				id: 0,
				region: [],
				addressName: ''
			};
		},

		onShow() {},
		onLoad(options) {
			this.id = parseInt(options.id)
			this.getInfo()
		},
		methods: {
			copyAddress() {
				uni.getClipboardData({
					success: (res) => {
						this.addressName = res.data
						this.$req.post('/user/addersssb', {
							title: this.addressName
						}).then(res => {
							let v = res.data.data
							if (v.province != '') {
								this.name = v.person
								this.phone = v.phonenum
								this.region = [v.province, v.city, v.county]
								this.menpai = v.detail
							}
						})
					},  
					fail: (err) => {
						this.$req.post('/user/addersssb', {
							title: this.addressName
						}).then(res => {
							let v = res.data.data
							if (v.province != '') {
								this.name = v.person
								this.phone = v.phonenum
								this.region = [v.province, v.city, v.county]
								this.menpai = v.detail
							}
						})
					}
				})
			},
			chooseRegion(e) {
				this.region = e.detail.value
			},
			getInfo() {
				this.$req.post('/user/userareaInfo', {
					id: this.id
				}).then(res => {
					let info = res.data.data
					this.name = info.name
					this.phone = info.phone
					this.menpai = info.area
					this.region = [info.province, info.city, info.county]
				})
			},
			submitInfo() {
				this.loadflag = true
				if (this.name == '') {
					uni.showToast({
						title: '请填写联系人姓名',
						icon: 'none'
					})
					this.loadflag = false
				} else if (this.phone == '') {
					uni.showToast({
						title: '请填写联系人手机号码',
						icon: 'none'
					})
					this.loadflag = false
				} else if (this.region.length == 0) {
					uni.showToast({
						title: '请选择省市区',
						icon: 'none'
					})
					this.loadflag = false
				} else if (this.menpai == '') {
					uni.showToast({
						title: '请填写详细地址',
						icon: 'none'
					})
					this.loadflag = false
				} else {
					uni.showLoading({
						title: '正在保存'
					})
					this.$req.post('/user/userAdderssupdate ', {
						uid: uni.getStorageSync('uid'),
						name: this.name,
						phone: this.phone,
						province: this.region[0],
						city: this.region[1],
						county: this.region[2],
						area: this.menpai,
						id: this.id
					}).then(res => {
						uni.hideLoading()
						uni.showToast({
							title: '保存成功',
							icon: 'success',
							success: () => {
								setTimeout(() => {
									uni.navigateBack()
								}, 500)
							}
						})
					})
				}
			},
			chooseAddress() {
				uni.navigateTo({
					url: './choose'
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.address-content {
		min-height: 100vh;
		font-family: PingFang SC;
		background: #F5F8FB;
	}

	.info-box {
		background: #fff;
		padding: 0 20rpx;
		width: 710rpx;
		border-radius: 10rpx;
		margin-top: 20rpx;
	}

	.one-info {
		width: 100%;
		padding: 32rpx 0;
		font-size: 28rpx;
		border-bottom: #efefef solid 1px;
	}

	.info-title {
		color: #3b3c3c;
		width: 150rpx;
	}

	.right-box {
		width: calc(100% - 150rpx);

		input {
			width: 100%;
			text-align: left;
			font-size: 28rpx;
		}
	}



	.one-btn {
		color: #fff;
		height: 90rpx;
		width: 710rpx;
		border-radius: 24rpx;
		margin-top: 100rpx;
	}

	.area-info {
		width: calc(100% - 100rpx);
	}

	.text-box {
		font-size: 28rpx;
	}
</style>
<style lang="scss">
	.address-content {
		.plac-class {
			color: #c2c2c2;
		}
	}
</style>